/*****目标团队*****/
<template><!---->
  <div id="attr">
  	<div class = "attr-item" v-for="(attr,index) in attrArr" style="margin-bottom:10px">
  		<Input v-model.trim="attr.key" placeholder="key" style="width: 200px" /> 
  		-
  		<Input v-model.trim="attr.value" placeholder="value" style="width: 200px" />
  		<Icon type="md-remove-circle" :size="20" @click="removeAttr(index)"/>
  	</div>
  	<Button type="primary" ghost icon="md-add" @click="addAttr" style="width:150px;"></Button>
  </div>
</template>

<script>
  export default {
  name: 'cusAttribute',
    props:['msgVal'],
	data(){
	  	return {
		  	val:'123',
		  	index:0,
		  	attrArr:[{
		  		key:'',
		  		value:''
		  	}]
	  	}	
	},
	filters:{

	},
	watch:{
		attrArr:{
			handler(val){
				this.$emit('func',val);
			},
			deep: true
		}
	},
	mounted(){
    	console.log(this.msgVal);
    	if(JSON.stringify(this.msgVal) != "{}"){
    		this.attrArr = this.msgVal;
    		this.Index = this.attrArr.length-1;
    	}else{
    		this.attrArr = [{
		  		key:'',
		  		value:''
		  	}]
    		this.Index = 0;
    	}
	},
    methods:{
    	addAttr(){
    		this.index ++ ;
    		this.attrArr.push({
		  		key:'',
		  		value:''
		  	})
    	},
    	removeAttr(index){
    		this.index --;
    		this.attrArr.splice(index,1);
    	}
    }
}
</script>

<style>
  .drillsTable .ivu-poptip-body {
    text-align: left!important;
  }
  .scenesHeader{
    margin-bottom: 16px;
  }
  .drillTables{
    min-height: 300px;
  }
  .drillsTable.ivu-table-wrapper{
    overflow: inherit;
  }
</style>
<style scoped>
  .Titles{
    background: #eeeeee;
    margin: 16px auto;
    padding: 10px 0;
  }
  .targetHeader{
    /*padding: 10px;*/
    margin-bottom: 10px;
  }
</style>
